<template>
  <div class="app-container">
    <el-row type="flex" class="row-bg btn-row" justify="end">
      <el-button class="filter-item" size="mini" @click="add" type="primary" icon="el-icon-plus">新增银行卡</el-button>
    </el-row>
    <el-form :inline="true" :model="q" class="demo-form-inline query" label-position="left" >
      <el-form-item label="商户">
        <el-select v-model="q.mch_id" placeholder="请选择">
          <el-option label="所有" :value=null></el-option>
          <el-option v-for="mch of MchList" :key="mch.id" :label="mch.name" :value="mch.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-input v-model="q.name" placeholder="银行卡名称" prefix-icon="el-icon-edit"></el-input>
      </el-form-item>
      <el-form-item>
        <el-input v-model="q.account_number" placeholder="银行卡号" prefix-icon="el-icon-edit"></el-input>
      </el-form-item>
      <el-form-item>
        <el-input v-model="q.phone" placeholder="电话" prefix-icon="el-icon-edit"></el-input>
      </el-form-item>
      <el-form-item>
        <el-input v-model="q.account_holder" placeholder="持卡人姓名" prefix-icon="el-icon-edit"></el-input>
      </el-form-item>
      <el-form-item>
        <el-input v-model="q.bank" placeholder="银行" prefix-icon="el-icon-edit"></el-input>
      </el-form-item>
      <el-form-item label="状态">
        <el-select v-model.number="q.status" placeholder="请选择">
          <el-option label="所有" :value=null></el-option>
          <el-option v-for="(statu, index) of statusArray" :key="index" :label="statu" :value="index"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="账户金额">
        <el-input v-model="balance.$gte" placeholder="大于" prefix-icon="el-icon-edit"></el-input>
      </el-form-item>
      <el-form-item>
        <el-input v-model="balance.$lt" placeholder="小于" prefix-icon="el-icon-edit"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="query">查询</el-button>
        <el-button type="danger" @click="reload">重置</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="bankcardData.list" v-loading.body="listLoading"  @sort-change="sortlist"  element-loading-text="Loading" stripe border fit highlight-current-row>
      <el-table-column prop="id" label='ID' width="80"></el-table-column>
      <el-table-column prop="name" label='名称' width="100"></el-table-column>
      <el-table-column prop="mch_id" label='商户号' width="120"></el-table-column>
      <el-table-column prop="account_number" label='银行卡号'  width="160"></el-table-column>
      <el-table-column prop="account_holder" label='持卡人姓名' min-width="100"></el-table-column>
      <el-table-column prop="bank" label='银行名称' min-width="150"></el-table-column>
      <el-table-column prop="phone" label='电话' min-width="150"></el-table-column>
      <el-table-column prop="subbranch" label='支行信息' min-width="150"></el-table-column>
      <el-table-column prop="balance" label='余额' min-width="100"></el-table-column>
      <el-table-column prop="desc" label='描述' min-width="150"></el-table-column>
      <!--<el-table-column prop="online_status" label='在线状态' min-width="100"></el-table-column>-->
      <el-table-column prop="status" label='状态' width="100">
        <template slot-scope="scope">{{statusArray[scope.row.status]}}</template>
      </el-table-column>
      <el-table-column prop="updated_at" label='更新时间' sortable width="180"></el-table-column>
      <el-table-column prop="created_at" label='创建时间' width="180"></el-table-column>
      <el-table-column label="操作" width="220" fixed="right">
        <template slot-scope="scope">
          <div>
            <el-button type="text" size="small" v-if="roles > 4" @click="update(scope.row)">[编辑]</el-button>
            <el-button type="text" size="small" v-if="roles > 4" @click="remove(scope.row)">[删除]</el-button>
            <el-button type="text" size="small" v-if="roles > 4" @click="qrcode(scope.row)">[生成收款码]</el-button>
            <el-button type="text" size="small" v-if="roles > 4" @click="stats(scope.row.name)">[统计]</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination  @size-change="handleSizeChange" @current-change="handleCurrentChange"
                      :current-page="q.$page" :page-sizes="$store.state.app.pageSizeArr"
                      :page-size="q.$size"
                      layout="total, sizes, prev, pager, next, jumper"
                      :total="bankcardData.total_count">
      </el-pagination>
    </div>
    <save-bankcard v-if="showBankcardInfo" :showBankcardInfo.sync ="showBankcardInfo" :bankcard_id="bankcard_id" :MchList="MchList"></save-bankcard>
    <view-statistics v-if="showStatistics" :showStatistics.sync ="showStatistics" :cardCode="cardCode" :cardStatsList="cardStatsList"></view-statistics>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import saveBankcard from './saveBankcard'
import viewStatistics from './viewStatistics'
import { getBankcardList, deleteBankcard, getBankcardRechargeUrl, getMchList } from '@/api/merchant'

export default {
  components: { saveBankcard, viewStatistics },
  data() {
    return {
      bankcardData: {},
      q: {$size: 30, $page: 1},
      listLoading: true,
      showBankcardInfo: false,
      showStatistics: false,
      MchList: [],
      cardStatsList: [],
      balance: {},
      statusArray: ['关闭', '开启'],
      bankcard_id: null,
      cardCode: null
    }
  },
  computed: {
    ...mapGetters([
      'roles'
    ])
  },
  filters: {},
  created() {
    this.getList()
    this.getMchList()
  },
  deactivated(){
    this.listLoading = false
  },
  methods: {
  
    sortlist(sort){
      this.q.$orderby = sort.prop
      this.getList()
    },
    add(){
      this.bankcard_id = null
      this.showBankcardInfo = true
    },
    update(row){
      this.bankcard_id = row.id
      this.showBankcardInfo = true
    },
    query(){
      this.getList()
    },
    reload() {
      this.q = {$size: 30, $page: 1}
      this.balance = {}
      this.getList()
    },
    remove(row){
      this.$confirm(`确认删除ID为${row.id}的项么？`, '删除商户', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteBankcard(row.id).then(res => {
          if(res.status === 0){
            this.$message({ type: 'success', message: '删除成功!' })
            this.getList()
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    qrcode(row){
      this.$prompt('二维码金额，也可以不指定金额', '', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(({ value }) => {
        let body = {}
        body.id = row.id
        body.amount = value
        getBankcardRechargeUrl(body).then(res => {
          if(res.status === 0){
            this.$message.success(res.data.url)
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消输入'
        })
      })
    },
    stats(data){
      this.cardCode = data
      this.showStatistics = true
    },
    handleSizeChange (val) {
      this.q.$size = val
      this.getList()
    },
    handleCurrentChange (val) {
      this.q.$page = val
      this.getList()
    },
    getList() {
      if(this.balance.$gte || this.balance.$lt){
        this.q.balance = this.balance
      }
      let params = Object.assign({
        $orderby: '-updated_at'
      }, this.q)
      this.listLoading = true
      getBankcardList(params).then(res => {
        if (res.status === 0) {
          this.listLoading = false
          this.bankcardData = res.data
        }
      })
    },
    getMchList(){
      getMchList({$size: -1}).then(res => {
        if (res.status === 0) {
          this.MchList = res.data.list
        }
      })
    }
  },
  watch: {
    showBankcardInfo() {
      if(!this.showBankcardInfo){
        this.getList()
      }
    }
  }
}
</script>
<style>
  .btn-row{
    padding: 0 0 1rem 0;
  }
</style>
